<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>应用详情</span>
        <el-button type="primary" @click="router.push('/AppManager/Index')">返回列表</el-button>
      </div>
    </template>

    <div v-loading="loading">
      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">应用名称：</el-col>
        <el-col :span="21">{{ applicationDetail.name }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">简介：</el-col>
        <el-col :span="21">{{ applicationDetail.description }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">回调地址：</el-col>
        <el-col :span="21">{{ applicationDetail.authDomain }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">状态：</el-col>
        <el-col :span="21">{{ applicationDetail.status == 1 ? '正常' : applicationDetail.status == 0 ? '已禁用' : '' }}</el-col>
      </el-row>

      <el-row class="detail-item">
        <el-col :span="3" class="detail-label">秘钥：</el-col>
        <el-col :span="21">{{ applicationDetail.secret }}</el-col>
      </el-row>
      
    </div>
  </el-card>
</template>

<script>
export default { name: "applicationDetail" }
</script>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { http } from '@/utils/http/index';

/* 路由 */
const router = useRouter()

onMounted(() => {
  if(router.currentRoute.value.query.id){
    getApplicationDetail()
  }
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情数据 */
const applicationDetail = ref({})

/* 查询详情 */
const getApplicationDetail = () => {
  loading.value = true
  http.$GET("/AppManager/GetAppById", { Id: router.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return ElMessage.warning("查询失败")
    if (!res.result) return
    applicationDetail.value = res.result.content
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败")
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
</style>